<template>
  <div class="search_question_detail">
    <nav-bar></nav-bar>
    <div class="collect">
      <div class="title">
        <span>题库:</span>
        <span>{{$route.params.tag}}</span>
      </div>
      <el-button :plain="true"
                 @click="collect"
                 class="collect_button" :class="{active: isCollect}">
        <span class="iconfont" v-show="!isCollect">&#xe8b9;</span>
        <span class="iconfont" v-show="isCollect">&#xe8c6;</span>
        <span>收藏</span>
      </el-button>
    </div>

    <div class="question_list">
      <question-detail v-for="(item,index) in questionList.list"
                       :item="item"
                       :index="index"></question-detail>
    </div>

  </div>
</template>

<script>
  import NavBar from "components/content/navBar/NavBar";
  import QuestionDetail from "./QuestionDetail";

  import {getQuestionDetail} from "network/search";
  import {isCollect, cancelCollection, getClassify} from "network/collect";
  export default {
    name: "SearchQuestionDetail",
    components: {
      NavBar,
      QuestionDetail
    },
    data() {
      return {
        id: '',
        questionList: {
          counter: 0,
          list: []
        },
        isCollect: false,
      }
    },
    created() {
      this.id = this.$route.params.id
      getQuestionDetail(this.id).then(res => {
        if(res.data.code) {
          this.questionList.list = res.data.data.list
          this.questionList.counter = res.data.data.list.length
        }
      })

      isCollect('questions', this.$store.state.userInfo.id, this.id).then(res => {
        console.log(res)
        if(res.data.code) {
          this.isCollect = res.data.data
        }
      })
    },
    methods: {
      collect() {
        getClassify('questions', this.$store.state.userInfo.id).then(res => {
          console.log(res)
        })

        if(!this.isCollect) {
          this.$messageBox.collect(this.id, this.$store.state.userInfo.id, 'questions')
          this.isCollect = true
        } else {
          const obj = {
            userId: this.$store.state.userInfo.id,
            type: "questions",
            collectId: this.id
          }
          cancelCollection(obj).then(res => {
            if(res.data.code) {
              this.$toast.show('已取消收藏', 'success', 1000)
              this.isCollect = false
            }
          })
        }
      },
    }
  }
</script>

<style scoped>
  .search_question_detail {
    width: 1100px;
    margin: 0 auto;
  }

  .collect {
    overflow: hidden;
    padding: 15px 0 0 0;
    background-color: #fff;
  }

  .active {
    color: #002766;
  }

  .title {
    float: left;
    padding-left: 20px;
    font-size: 16px;
    font-weight: 700;
    line-height: 40px;
  }

  .title span:nth-child(1) {
    margin-right: 10px;
  }

  .collect_button {
    float: right;
    margin-right: 20px;
    border: 0;
    font-size: 16px;
  }

  .question_list {
    padding: 0 20px 20px 20px;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
  }
</style>
